import lessModule from "./index.module.less"
import trendImage from "../../../../../../../../assets/image/mapComponent-trend.png"
import detailImage from "../../../../../../../../assets/image/mapComponent-detail.png"
import { ReactElement, useEffect, useRef, useState } from "react"

// 主页-全景监控页面-地图组件-信息窗组件
interface homePagePanoramicMonitoringPageMapComponentInfoWindowComponentInterface {
    title: string
    change_navigate: Function
    change_detail: Function
    contentComponent: ReactElement
}
const HomePage_PanoramicMonitoringPage_MapComponent_InfoWindowComponent: React.FC<homePagePanoramicMonitoringPageMapComponentInfoWindowComponentInterface> = (props) => {


    const click_navigate = () => {
        props.change_navigate()
    }
    const click_detail = () => {
        setTimeout(() => {
            props.change_detail()
        });
    }

    return (
        <div className={lessModule["homePagePanoramicMonitoringPageMapComponentInfoWindowComponent"]}
        >
            <header className={lessModule["homePagePanoramicMonitoringPageMapComponentInfoWindowComponent-header"]}>
                <span>{props.title}</span>
                <div className={lessModule["homePagePanoramicMonitoringPageMapComponentInfoWindowComponent-header__imageGroup"]}>
                    <img className="homePage-handleImage" src={trendImage} onClick={click_navigate} />
                    <img className="homePage-handleImage" src={detailImage} onClick={click_detail} />
                </div>
            </header>
            {
                props.contentComponent
            }
            <div className={lessModule["homePagePanoramicMonitoringPageMapComponentInfoWindowComponent-arrow"]}></div>
        </div >
    )
}
export default HomePage_PanoramicMonitoringPage_MapComponent_InfoWindowComponent